import React, { useState } from "react";
import { Layout, Menu, Button, Input, Badge } from "antd";
import type { MenuProps } from "antd";
import {
  ApiOutlined,
  DatabaseOutlined,
  SearchOutlined,
  PlusOutlined,
  TableOutlined,
  RightOutlined,
  HistoryOutlined,
} from "@ant-design/icons";
import "./DataSourceSider.css";

const { Sider } = Layout;

type MenuItem = Required<MenuProps>["items"][number];

interface CustomMenuItem {
  key: string;
  icon?: React.ReactNode;
  label: React.ReactNode;
  children?: CustomMenuItem[];
  description?: string;
}

interface DataSourceSiderProps {
  collapsed: boolean;
}

const DataSourceSider: React.FC<DataSourceSiderProps> = ({ collapsed }) => {
  const [selectedLeftMenu, setSelectedLeftMenu] = useState<string>("apis");
  const [showSearch, setShowSearch] = useState(false);

  const renderMenuItem = (item: CustomMenuItem) => {
    return (
      <div className="menu-item-content">
        <div className="menu-item-main">
          {item.icon && <span className="menu-item-icon">{item.icon}</span>}
          <div className="menu-item-text">
            <div className="menu-item-title">
              <span className="menu-item-label">{item.label}</span>
              <RightOutlined className="menu-item-arrow" />
            </div>
            {item.description && (
              <div className="menu-item-description">{item.description}</div>
            )}
          </div>
        </div>
      </div>
    );
  };

  const apiItems: CustomMenuItem[] = [
    {
      key: "api-1",
      icon: <ApiOutlined />,
      label: renderMenuItem({
        key: "api-1",
        label: "用户管理API",
        description: "用户管理相关的API接口",
      }),
    },
    {
      key: "api-2",
      icon: <ApiOutlined />,
      label: renderMenuItem({
        key: "api-2",
        label: "订单管理API",
        description: "订单处理相关的API接口",
      }),
    },
    {
      key: "api-3",
      icon: <ApiOutlined />,
      label: renderMenuItem({
        key: "api-3",
        label: "支付管理API",
        description: "支付处理相关的API接口",
      }),
    },
  ];

  const databaseItems: CustomMenuItem[] = [
    {
      key: "user",
      icon: <TableOutlined />,
      label: renderMenuItem({
        key: "user",
        label: "user",
        description: "用户基本信息表",
      }),
    },
    {
      key: "dept",
      icon: <TableOutlined />,
      label: renderMenuItem({
        key: "dept",
        label: "dept",
        description: "部门信息表",
      }),
    },
    {
      key: "t_user_log_history",
      icon: <HistoryOutlined />,
      label: renderMenuItem({
        key: "t_user_log_history",
        label: "t_user_log_history",
        description: "用户操作日志记录表",
      }),
    },
  ];

  const leftMenuItems = [
    {
      key: "apis",
      icon: <ApiOutlined />,
      label: (
        <div className="menu-item-with-count">
          <span>APIs</span>
          <Badge count={apiItems.length} className="menu-count-badge" />
        </div>
      ),
    },
    {
      key: "database",
      icon: <DatabaseOutlined />,
      label: (
        <div className="menu-item-with-count">
          <span>数据库</span>
          <Badge count={databaseItems.length} className="menu-count-badge" />
        </div>
      ),
    },
  ];

  return (
    <Sider
      trigger={null}
      collapsible
      collapsed={collapsed}
      theme="light"
      width={280}
    >
      <div className="logo-section">
        <span className="logo-text">数据源</span>
        <div className="logo-actions">
          <Button
            type="text"
            icon={<SearchOutlined />}
            onClick={() => setShowSearch(!showSearch)}
          />
          <Button type="text" icon={<PlusOutlined />} />
        </div>
      </div>
      {showSearch && (
        <div className="sider-search">
          <Input placeholder="搜索" className="search-input" autoFocus />
        </div>
      )}
      <Menu
        mode="horizontal"
        selectedKeys={[selectedLeftMenu]}
        items={leftMenuItems}
        className="left-menu"
        onClick={({ key }) => setSelectedLeftMenu(key)}
      />
      <Menu
        mode="inline"
        items={selectedLeftMenu === "apis" ? apiItems : databaseItems}
        className="custom-menu"
      />
    </Sider>
  );
};

export default DataSourceSider;
